<template>
  <view class="padding-top">
    <view class="card">
      <image class="vcard" :src="vcard.picture" mode="widthFix"></image>

      <view v-if="vcard" class="info" :style="{ color: style.color, background: style.background }">
        <!-- <view>
					<text class="text-xl margin-right text-bold">{{vcard.name}}</text>
					<u-tag :text="vcard.position" size="mini" type="warning" bg-color="transparent" shape="circle" />
				</view> -->

        <block v-if="vcard.mobile">
          <view class="row" v-for="i in vcard.mobile" :key="i.id">
            <image class="icon" src="../../static/icons/mobile.png"></image>
            <view class="key">手机：</view>
            <view class="val">{{i.val}}</view>
          </view>
        </block>

        <block v-if="vcard.email">
          <view class="row" v-for="i in vcard.email" :key="i.id">
            <image class="icon" src="../../static/icons/email.png"></image>
            <view class="key">邮箱：</view>
            <view class="val">{{i.val}}</view>
          </view>
        </block>

        <block v-if="vcard.region">
          <view class="row">
            <image class="icon" src="../../static/icons/address.png"></image>
            <view class="key">地区：</view>
            <view class="val">{{vcard.region}}</view>
          </view>
        </block>

        <block v-if="vcard.address">
          <view class="row" v-for="i in vcard.address" :key="i.id">
            <image class="icon" src="../../static/icons/address.png"></image>
            <view class="key">地址：</view>
            <view class="val">{{i.val}}</view>
          </view>
        </block>

        <view class="summary" v-if="vcard.business_summary">
          <view class="text-bold margin-tb">
            业务简介
          </view>
          <view class="summary-text text-sm" style="line-height: 1.5;letter-spacing: 2rpx;">
            {{vcard.business_summary}}
          </view>
        </view>

        <view class="pics" v-if="vcard.pic">
          <image class="margin-tb" style="width: 100%;display: block;" :src="i" mode="widthFix" v-for="i in vcard.pic"
            :key="i"></image>
        </view>

        <view class="videos" v-if="vcard.video">
          <video class="margin-tb" style="width: 100%;display: block;" :src="i" v-for="i in vcard.video" :key="i"
            controls></video>
        </view>
      </view>
    </view>

    <!-- 操作栏 -->
    <u-gap height="240"></u-gap>

    <view class="fixed receive" v-if="type == 'receive'">
      <view class="text-center text-gray text-xl padding-bottom">快速制作一张名片</view>
      <my-btn @click="$goto('/pages/cards/list')">回复名片</my-btn>
    </view>

    <view class="fixed send" v-if="type == 'send'">
      <u-grid :col="3" :border="false">
        <u-grid-item @click="open = !open">
          <image src="/static/images/card2.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
          <view class="grid-text">名片样式</view>
        </u-grid-item>
        <u-grid-item @click="$goto('/pages/cards/edit?id=' + id)">
          <image src="/static/images/card3.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
          <view class="grid-text">信息编辑</view>
        </u-grid-item>
        <u-grid-item @click="popShow = true">
          <image src="/static/images/card4.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
          <view class="grid-text">直接发送</view>
        </u-grid-item>
      </u-grid>
    </view>

    <view class="fixed check" v-if="type == 'check' || type == 'customer'">
      <my-btn width="300" height="80" size="32" color="#ED4D38" bgColor="#fff" border="1px solid #BCBCBC" radius v-if="type == 'check'"
        @click="delFriend">删除名片</my-btn>
      <my-btn width="300" height="80" size="32" radius @click="popShow = true">转发名片</my-btn>
    </view>

    <!-- 卡片样式 -->
    <CardStyle v-if="vcard" :card-id="id" :list="vcard.style" :open="open" @toggle="e => open = e" @setStyle="getDetail" />

    <!-- 分享信息 -->
    <u-popup v-model="popShow" mode="center" border-radius="16">
      <view class="padding">
        <textarea class="edit" v-model="shareMsg" placeholder="" />
        <view class="padding-top">
          <my-btn width="370" open-type="share" @click="popShow = false">立即发送</my-btn>
        </view>
      </view>
    </u-popup>
	</view>
</template>

<script>
	import CardStyle from './components/card-style.vue'
	export default {
		components: {
			CardStyle
		},
		data() {
			return {
				id: '',
				type: '',
				vcard: '',
				style: '',
				open: false,
        popShow: false,
        shareMsg: '我正在使用轻名片，快来互相交换名片吧!'
			};
		},
		onLoad(opt) {
      const scene = decodeURIComponent(opt.scene)
      console.log(scene)
      if (scene != 'undefined'){
        this.id = scene
        this.type = 'receive'
      } else {
        this.id = opt.id
        this.type = opt.type
      }
		},
		onShow() {
			if (!this.$store.state.token) {
				this.$goto('/pages/other/loading')
			} else {
				this.getDetail()
				this.addFriend()
			}
		},
		onShareAppMessage() {
			return {
				title: this.shareMsg,
				path: `/pages/cards/detail?id=${this.id}&type=receive`,
				imageUrl: this.vcard.picture
			}
		},
		methods: {
			getDetail() {
				this.$u.get('/receive/detail', {
          id: this.id,
          type: this.type
        }).then(res => {
					this.vcard = res.data.result.vcard
					let { style } = res.data.result.vcard
					let info = style.find(item => item.style_type == 'info')
					let img = `url(${info.thumbnail}) center/cover`
					let bgColor = info.bg_color || '#fff'
					this.style = {
						color: info.color,
						background: img + ' ' +bgColor
					}
				})
			},
			addFriend() {
				if (this.type == 'receive') {
					this.$u.post('/myvcard/friend/add', {
						id: this.id
					}).then(res => {
						
					})
				}
			},
			delFriend() {
				this.$u.post('/myvcard/friend/delete', {
					id: this.id
				}).then(res => {
					this.$msg(res.data.msg, 1000, true).then(res => this.$goto(1))
				})
			}
		}
	}
</script>

<style lang="scss">
	.vcard {
		width: 100%;
		display: block;
	}
	
	.card {
		width: 670rpx;
		margin: 0 auto;
		background: #fff;
		font-size: 28rpx;
		box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(0, 0, 0, 0.17);
	}

	.info {
		font-size: 28rpx;
		padding: 60rpx 40rpx;

		.row {
			height: 64rpx;
			display: flex;
			align-items: flex-start;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin: 0 8rpx 0 0;
			}
			
			.key {
				width: 90rpx;
			}
			
			.val {
				width: 440rpx;
			}
		}
	}

	.fixed {
		width: 750rpx;
		background: #FFFFFF;
		display: flex;
		position: fixed;
		bottom: 0;
		letter-spacing: 2rpx;

		&.receive {
			height: 250rpx;
			border-radius: 30rpx 30rpx 0 0;
			box-shadow: 0rpx 0rpx 7rpx 1rpx rgba(0, 0, 0, 0.26);
			flex-flow: column;
			justify-content: center;
			align-items: center;
		}

		&.send {
			height: 170rpx;
			box-shadow: 0rpx 0rpx 7rpx 1rpx rgba(0, 0, 0, 0.26);
		}

		&.check {
			height: 120rpx;
			box-shadow: 0rpx 0rpx 7rpx 1rpx rgba(0, 0, 0, 0.26);
			justify-content: space-around;
			align-items: center;
		}
	}

	.border {
		border: 1px solid red;
	}
	
	.share {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 99;
		opacity: 0;
		border: none;
	}
  
  .edit {
    height: 200rpx;
    padding: 16rpx;
    border-radius: 8rpx;
    border: 1px solid rgba(0,0,0,0.1);
  }
</style>
